import { defineStore } from "pinia";
import { info, tags } from "../utils/storage";
import { NewLabels } from "../Interface";
// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const useTagLists = defineStore({
  // id: 必须的，在所有 Store 中唯一
  id: "TagLists",
  // state: 返回对象的函数
  state: () => ({
    // 默认选择的tags的active是true
    // 使用三目运算符判断当前localStorage是否存储有tags的信息,有的话就使用localStorage存储的tags,如果localStorage没有存储就使用默认提供的几个例子
    Tags: tags
      ? tags
      : [
          { name: "吃饭", active: true },
          { name: "游戏", active: false },
          { name: "学习", active: false },
          { name: "娱乐", active: false },
        ],
    // 收入还是支出的types -  true为收入 false为支出
    Type: true,
    // 备注输入的内容
    Notes: "",
    // 最终的输入信息

    // 使用三目运算符判断当前localStorage是否存储有info的消费信息,有的话就使用localStorage存储的info,如果localStorage没有存储就使用默认提供的几个消费测试案例

    allInfo: info
      ? info
      : [
          {
            money: 99,
            notes: "测试用例1",
            type: true,
            label: "学习",
            time: "2022-03-13 19:24:50",
          },
          {
            money: 39,
            notes: "测试用例2",
            type: false,
            label: "游戏",
            time: "2022-03-22 19:24:50",
          },
          {
            money: 29,
            notes: "测试用例3",
            type: true,
            label: "娱乐",
            time: "2022-03-03 19:24:50",
          },
          {
            money: 59,
            notes: "测试用例4",
            type: false,
            label: "吃饭",
            time: "2022-03-02 19:24:50",
          },
        ],
  }),
  actions: {
    // payload 新添加的标签名称
    addLabel(payload: NewLabels) {
      // 先检查是否已有相同的标签名
      let tempArr: Array<string> = [];
      this.Tags.forEach((element: { name: string }) => {
        tempArr.push(element.name);
      });
      // 必须标签名不重复并且不为空的时候才能添加标签
      if (tempArr.includes(payload.name) !== true && payload.name !== "") {
        // 标签名不重复的时候再添加
        this.Tags.push(payload);
      }
      // 重复标签名提示 数组方法include  如果数组中有对应元素就返回true
      if (tempArr.includes(payload.name)) {
        alert("已经存在有相同的标签名! 请重新输入!");
        return;
      }
      // 空标签名提示
      if (payload.name === "") {
        alert("请输入有效的标签名!");
        return;
      }
    },
    // 根据点击切换当前点击的tags的active active用来操作样式
    toggle(TagPayload: string) {
      this.Tags.forEach((element: { active: boolean; name: string }) => {
        // 首先先把active属性置false
        element.active = false;
        // 匹配到和点击的名字相同的tag就修改active属性
        if (element.name === TagPayload) {
          element.active = true;
        }
      });
    },
    // 添加备注信息
    addNotes(NotesPayLoad: string) {
      this.Notes = NotesPayLoad;
      // console.log(this.Notes);
    },
    // 输入金额之后点击OK 完成保持信息
    finishInput(NumberPayload: number, time: any) {
      let currentTag: string = "";
      this.Tags.forEach((element: { active: boolean; name: string }) => {
        if (element.active === true) {
          currentTag = element.name;
        }
      });
      // 一次收入或者支出的全部信息
      // 包括 金额 备注 收入/支出 选择的标签 记录时间
      const moneyInfo: any = {
        money: NumberPayload,
        notes: this.Notes,
        type: this.Type,
        label: currentTag,
        time: time,
      };
      this.allInfo.push(moneyInfo);
      this.Notes = "";
      console.log(this.allInfo);
      // 把所有的消费信息存储到localStorage做持久化存储
      localStorage.setItem("UserInfo", JSON.stringify(this.allInfo));
    },
  },
});
